<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>vue的生命周期函数</title>
		<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="test">
			<h1>这里是el</h1>
		</div>
		<script>
			var vue = new Vue({
				/* 
				组建创建期间的钩子函数：beforeCreate、created、beforeMount、mounted
					1、当vm中同时有el和template时，优先使用template进行模版渲染
					2、只有在mounted之后才能成功获取和操作dom元素，在这之前无法成功获取浏览器上的dom元素，因为在之前dom元素还在内存，并未渲染到浏览器中，
					3、如果需要向后台发送ajax数据，必须在created()函数中或之后执行，
				因为vue实例中的data数据只有当created之后才初始化成功，在这之前data数据未初始化成功，为undifined
				*/
				el:'#test',
				template:'<div><h1 id="m">这里是template {{ msg }}</h1></div>',
				data:{
					msg:'wangziyuan 真好看！'
				},
				// 生命周期函数
				// beforeCreate:function(){
					
				// }
				//简写
				beforeCreate(){
					console.log('beforeCreate')
					// beforeCreate期间，data参数并未初始化成功
					console.log("msg=" + this.msg)
					let m = document.getElementById('m')
					console.log("Dom:" + m)
				},
				created(){
					console.log('created')
					// created期间，data参数已经初始化成功
					console.log("msg=" + this.msg)
					let m = document.getElementById('m')
					console.log("Dom:" + m)
				},
				beforeMount(){
					console.log('beforeMount')
					let m = document.getElementById('m')
					console.log("Dom:" + m)
				},
				mounted(){
					console.log('mounted')
					let m = document.getElementById('m')
					console.log("Dom:" + m)
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>
